
<template>
  <div id="salvenote">
    <div class="page-header">
      <span class="title-item">运维任务分派</span>
    </div>
    <a-form-model :model="form" :colon="false" style="margin: 10px 0">
      <a-row style="display: flex; align-items: center">
        <a-col :span="4">
          <a-form-model-item label="排口选择" class="from-item__class">
            <a-input
              v-model="page.monitorName"
              placeholder="请输入排口"
              allow-clear
            ></a-input>
          </a-form-model-item>
        </a-col>
        <a-col
          :span="4"
          :offset="1"
          style="display: flex; justify-content: space-between"
        >
          <a-button style="letter-spacing: 8px" type="primary" @click="onSubmit"
            >查询</a-button
          >
        </a-col>
      </a-row>
    </a-form-model>
    <div class="tableclass">
      <a-table
        style="height: 94%"
        :data-source="data"
        :pagination="false"
        :columns="columns"
        :rowKey="(record) => record.id"
      >
        <span slot="action" slot-scope="text, action">
          <a-button
            type="primary"
            @click="apportion(action)"
            v-if="action.userId == null && action.planStartTime == '-'"
            >任务制定</a-button
          >
          <a-button
            type="primary"
            @click="editData(action)"
            style="margin-left: 10px"
            v-else-if="action.userId == null && action.planStartTime != '-'"
            >任务制定</a-button
          >
          <a-button
            type="primary"
            disabled
            style="margin-left: 10px"
            v-else-if="
              action.planStartTime.length > 0 && action.userId.length > 0
            "
            >任务制定</a-button
          >
        </span>
        <template slot="comparatorStatus" slot-scope="text, comparatorStatus">
          <span
            style="color: #d16655"
            v-if="
              comparatorStatus.userId == null &&
              comparatorStatus.planStartTime == '-'
            "
            >未分配</span
          >
          <span
            style="color: #afa82e"
            v-else-if="
              comparatorStatus.planStartTime != '-' &&
              comparatorStatus.userId == null
            "
            >已结束</span
          >
          <span
            style="color: #359842"
            v-else-if="
              comparatorStatus.planStartTime.length > 0 &&
              comparatorStatus.userId.length > 0
            "
            >进行中</span
          >
        </template>
      </a-table>

      <div class="bottompage">
        <a-pagination
          :show-total="(total) => `共 ${total} 条记录`"
          :item-render="itemRender"
          v-model="page.current"
          :total="total"
          :defaultPageSize="page.size"
          @change="pagechangeFn"
          show-less-items
        />
      </div>
      <!-- 人员分派 -->
      <a-modal
        :title="title"
        :visible="visibleB"
        :confirm-loading="confirmLoadingB"
        @cancel="handleCancel"
        closable
        :footer="null"
        destroyOnClose
        :maskClosable="false"
      >
        <a-form-model
          :form="staff"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
        >
          <a-form-model-item label="计划开始时间">
            <a-date-picker
              v-model="staff.planStartTime"
              valueFormat="YYYY-MM-DD HH:mm:ss"
              show-time
              type="date"
              placeholder="开始时间"
              style="width: 100%"
            />
          </a-form-model-item>
          <!-- <a-form-model-item label="计划结束时间">
            <a-date-picker
              v-model="staff.planEndTime"
              valueFormat="YYYY-MM-DD HH:mm:ss"
              show-time
              type="date"
              placeholder="结束时间"
              style="width: 100%"
            />
          </a-form-model-item> -->
          <a-form-item label="任务类型">
            <a-select
              style="width:100%"
              allowClear
              @change="selectArea"
            >
              <a-select-option value="3"> 校验 </a-select-option>
              <a-select-option value="2"> 校准 </a-select-option>
              <a-select-option value="1"> 巡检 </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-model-item label="间隔天数">
            <a-input
              id="inputNumber"
              v-model="staff.interval"
              @change="onChange"
              style="width: 100%"
            />
          </a-form-model-item>
          <a-form-model-item label="人员分配">
            <a-select
              v-model="staff.userId"
              placeholder="选择人员"
              style="width: 100%"
              mode="multiple"
            >
              <a-select-option
                v-for="(item, index) in deptList"
                :key="index"
                :value="item.id"
                >{{ item.nickname }}</a-select-option
              >
            </a-select>
          </a-form-model-item>
        </a-form-model>
        <a-row type="flex" justify="end">
          <a-col :span="6">
            <a-button type="primary" @click="affirm">确认</a-button>
          </a-col>
          <a-col :span="6">
            <a-button type="info" @click="cancelBtn">取消</a-button>
          </a-col>
        </a-row>
      </a-modal>
      <!-- 修改 -->
      <!-- <a-modal
        :title="title"
        :visible="visibleA"
        :confirm-loading="confirmLoadingA"
        @cancel="handleCancel"
        closable
        :footer="null"
        destroyOnClose
        :maskClosable="false"
      >
        <a-form-model
          :form="staff"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
        >
          <a-form-model-item label="计划开始时间">
            <a-date-picker
              v-model="staff.planStartTime"
              valueFormat="YYYY-MM-DD HH:mm:ss"
              show-time
              type="date"
              placeholder="开始时间"
              style="width: 100%"
            />
          </a-form-model-item>
          <a-form-model-item label="计划结束时间">
            <a-date-picker
              v-model="staff.planEndTime"
              valueFormat="YYYY-MM-DD HH:mm:ss"
              show-time
              type="date"
              placeholder="结束时间"
              style="width: 100%"
            />
          </a-form-model-item>
          <a-form-model-item label="间隔天数">
              <a-input-number id="inputNumber" v-model="staff.interval"  @change="onChange" style="width: 100%"/>
          </a-form-model-item>
          <a-select
            v-model="staff.userId"
            placeholder="选择人员"
            style="width: 365px"
            mode="multiple"
          >
            <a-select-option
              v-for="(item, index) in deptList"
              :key="index"
              :value="item.id"
              >{{ item.nickname }}</a-select-option
            >
          </a-select>
        </a-form-model>
        <a-row type="flex" justify="end">
          <a-col :span="6">
            <a-button type="primary" @click="confirmSend">确认</a-button>
          </a-col>
          <a-col :span="6">
            <a-button type="primary" @click="cancelBtn">取消</a-button>
          </a-col>
        </a-row>
      </a-modal> -->
    </div>
  </div>
</template>
<script>
import moment from "moment";
import "moment/locale/zh-cn";

export default {
  data() {
    return {
      form: {},
      userList: [],
      columns: [
        {
          title: "序号",
          dataIndex: "num",
          align: "center",
          customRender: (text, record, index) =>
            `${(this.page.current - 1) * this.page.size + index + 1}`,
        },
        {
          title: "公司名称",
          dataIndex: "companyName",
          align: "center",
        },
        {
          title: "排口名称",
          dataIndex: "monitorName",
          align: "center",
        },
        {
          title: "开始时间",
          dataIndex: "planStartTime",
          width: "18%",
          align: "center",
        },
        {
          title: "结束时间",
          dataIndex: "planEndTime",
          width: "18%",
          align: "center",
        },
        {
          title: "状态",
          dataIndex: "",
          scopedSlots: { customRender: "comparatorStatus" },
          align: "center",
        },
        {
          title: "操作",
          dataIndex: "",
          key: "x",
          scopedSlots: { customRender: "action" },
          width: "20%",
          align: "center",
        },
      ],
      data: [],
      id: "",
      title: "",
      moment,
      page: {
        current: 1,
        size: 9,
        monitorName: "",
      },
      total: 0,
      dept: {
        current: 1, //获取人员数据
        size: 200,
        roleId: "",
      },
      deptList: [], //用户ID
      //详情弹出框
      visible: false,
      visibleA: false,
      visibleB: false,
      confirmLoading: false,
      confirmLoadingA: false,
      confirmLoadingB: false,
      //表格数据
      list: [],
      //详情数据
      detail: [],
      area: "",
      //人员分派
      staff: {
        equipmentId: "",
        planStartTime: "",
        // planEndTime: "",
        equipmentName: "",
        interval: "",
        maintenanceType:"",
        userId: [],
      },
      //修改数据
      // addForm: {
      //   equipmentId: "",
      //   planStartTime: "",
      //   planEndTime: "",
      //   equipmentName: "",
      //   interval: "",
      //   userId: "",
      // },
    };
  },

  methods: {
    selectArea(value) {
      this.staff.maintenanceType = value;
    },
    onChange(value) {
      this.staff.interval = value;
    },
    //查询
    onSubmit() {
      this.getdata();
    },
    //分页方法
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a> 上一页 </a>;
      } else if (type === "next") {
        return <a> 下一页 </a>;
      }
      return originalElement;
    },
    pagechangeFn(page, pageSize) {
      this.page.current = page;
      this.getdata();
    },
    //人员分配
    apportion(data) {
      this.title = "人员分配";
      this.visibleB = true;
      this.staff.equipmentId = data.id;
      this.staff.equipmentName = data.monitorName;
      this.getDept();
    },
    //获取ID用户名
    getDept() {
      let data = { monitorId: this.staff.equipmentId };
      this.$api
        .getUserInfoByMonitorId(data, this.staff.equipmentId)
        .then((res) => {
          this.deptList = res.data.data;
          console.log(this.deptList);
        });
    },
    //编辑按钮
    editData(data) {
      this.title = "修改信息";
      this.visibleA = true;
      this.staff.equipmentId = data.id;
      this.staff.equipmentName = data.monitorName;
      this.getDept();
    },
    //关闭弹窗
    handleCancel(e) {
      console.log("点击关闭按钮");
      this.visible = false;
      this.visibleA = false;
      this.visibleB = false;
    },
    //获取数据
    getdata() {
      var that = this;
      this.$api.task_findEquipmentInfoListPoByPage(this.page).then((res) => {
        var result = res.data.data;
        console.log(result);
        this.data = res.data.data;
        this.data.forEach((item) => {
          if (item.planStartTime === null) {
            item.planStartTime = "-";
          } else {
            item.planStartTime = moment(parseInt(item.planStartTime)).format(
              "YYYY/MM/DD"
            );
          }
          if (item.planEndTime === null) {
            item.planEndTime = "-";
          } else {
            item.planEndTime = moment(parseInt(item.planEndTime)).format(
              "YYYY/MM/DD"
            );
          }
        });
        that.data = result;
        this.total = res.data.total;
        this.userList = res.data.data;
        // this.id = res.data.data.id;
      });
    },
    //取消按钮
    cancelBtn() {
      this.visibleA = false;
      this.visibleB = false;
    },
    //新增修改数据
    confirmSend() {
      // if (this.title == "修改信息") {
      //   this.staff.userId = this.staff.userId.join(";");
      //   var data = this.addForm;
      //   if (data.planStartTime != "") {
      //     var planStartTime = new Date(data.planStartTime);
      //     data.planStartTime = planStartTime.getTime();
      //     data.equipmentId = data.id;
      //   }
      //   if (data.planEndTime != "") {
      //     var planEndTime = new Date(data.planEndTime);
      //     data.planEndTime = planEndTime.getTime();
      //   }
      //   this.$api.task_updateMaintenanceInstall(this.addForm).then((res) => {
      //     if (res.data.code == 0) {
      //       this.$message.info("修改任务成功!");
      //       this.visibleB = false;
      //       this.addForm = {};
      //       this.getdata();
      //     }
      //   });
      // } else {
      //   this.$api.task_updateMaintenanceInstall(this.addForm).then((res) => {
      //     if (res.data.data == true) {
      //       this.visibleB = false;
      //       this.$message.info("修改成功!");
      //       this.getdata();
      //     }
      //   });
      // }
      if (
        this.staff.planStartTime !== "" &&
        this.staff.planEndTime !== "" &&
        this.staff.interval !== "" &&
        this.staff.userId !== ""
      ) {
        this.staff.userId = this.staff.userId.join(";");
        var Rectang = JSON.parse(JSON.stringify(this.staff)); //深拷贝
        console.log(Rectang);
        Rectang.planEndTime = new Date(Rectang.planEndTime).getTime();
        Rectang.planStartTime = new Date(Rectang.planStartTime).getTime();
        console.log(Rectang);
        this.$api.task_updateMaintenanceInstall(Rectang).then((res) => {
          this.visibleA = false;
          this.staff = {};
          this.$message.info("新建任务成功");
          this.getdata();
        });
      } else {
        this.$message.info("输入不能为空");
      }
    },
    //确认提交任务
    affirm() {
      if (
        this.staff.planStartTime !== "" &&
        this.staff.planEndTime !== "" &&
        this.staff.interval !== "" &&
        this.staff.userId !== ""
      ) {
        this.staff.userId = this.staff.userId.join(";");
        var Rectang = JSON.parse(JSON.stringify(this.staff)); //深拷贝
        console.log(Rectang);
        Rectang.planEndTime = new Date(Rectang.planEndTime).getTime();
        Rectang.planStartTime = new Date(Rectang.planStartTime).getTime();
        console.log(Rectang);
        this.$api.task_insertMaintenanceInstall(Rectang).then((res) => {
          this.visibleB = false;
          this.staff = {};
          this.$message.info("新建任务成功");
          this.getdata();
        });
      } else {
        this.$message.info("输入不能为空");
      }
    },
  },
  mounted() {
    this.getdata();
  },
};
</script>
<style scoped src="../../../../assets/style/warning.css"></style>
<style scoped lang="scss" >
.ant-row-flex-end {
  margin-top: 30px;
}
::v-deep#salvenote .ant-form-item {
  margin-bottom: 0;
  display: flex;
  align-items: center;
}

::v-deep#salvenote .ant-form-item-children {
  display: inline-block;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#salvenote {
  position: relative;
  width: 98%;
  height: 98%;
  padding: 1%;
  box-sizing: border-box;
}
.solve-img {
  display: flex;
  justify-content: space-evenly;
}
/* 表格样式 */
.tableclass {
  width: 100%;
  height: 86%;
}
#salvenote .solvebtn {
  margin-right: 10px;
  border: none;
  font-weight: 700;
  color: #2c6a5f;
}

::v-deep#salvenote .ant-table table {
  height: auto;
  border-radius: 0;
  border-left: 1px solid #207064;
  border-right: 1px solid #207064;
}
.bottompage {
  position: absolute;
  right: 3%;
  bottom: 10px;
  display: flex;
  justify-content: space-between;
}
#salvenote ::v-deep .ant-checkbox-inner {
  border: 2px solid #2e9685;
  background-color: rgba(140, 179, 174, 0.5) !important;
}
#salvenote .ant-pagination-prev .ant-pagination-item-link,
.ant-pagination-next .ant-pagination-item-link {
  border: 0;
  background-color: rgba(30, 50, 48, 0.5);
  box-shadow: 0 0 10px 1px #188471 inset;
}

.ant-pagination {
  color: #bebebe;
}
.ant-form-item {
  color: #bebebe;
}
// 详情
::v-deep #salvenote .ant-form-item-children {
  color: rgba(255, 255, 255, 0.7);
}
</style>

